<template>
    <view class="container">
        <view class="search-box input-box">
            <icon class="before-icon" type="search" size="16" />
            <input
                class="input"
                @confirm="onSearch"
                confirm-type="search"
                placeholder="搜索"
                placeholder-class="plach"
            />
        </view>
        <view class="customers">
            <no-data v-if="data.length === 0 && searchText !== ''" />
            <view class="customer" v-for="(item, index) in data" :key="index">
                <view class="customer-head">
                    <view class="customer-title">{{ item.name }}</view>
                </view>
                <view class="customer-msg grey">
                    <!-- <view class="customer-msg-row">在保人数： 22人</view> -->
                    <view class="customer-msg-row"
                        >开户时间： {{ item.create_time }}</view
                    >
                </view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { getPublicClient } from '@/api/client'
import { ref } from 'vue'
const searchText = ref('')
const data = ref([] as { name: string; create_time: string }[])

const onSearch = async (event: { detail: { value: string } }) => {
    searchText.value = event.detail.value
    const result = await getPublicClient({
        search: event.detail.value
    })
    data.value = result
}
</script>
<style lang="scss" scoped>
.search-box {
    background-color: #fafafc;
    display: flex;
    justify-content: center;
    padding-bottom: 30rpx;
    .input {
        border-radius: 100rpx;
    }
    .before-icon {
        left: 64rpx;
        top: 41rpx;
    }
}
.customer {
    margin: 0 24rpx;
    padding: 30rpx 0;
}
</style>
